<template>
  <div>
    <!-- <el-menu
      router
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
    >
      <el-submenu index="/users">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item index="/users/list">用户列表</el-menu-item>
      </el-submenu>
      <el-submenu index="/rights">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>权限管理</span>
        </template>
        <el-menu-item index="/rights/peolist">角色列表</el-menu-item>
        <el-menu-item index="/rights/riglist">权限列表</el-menu-item>
      </el-submenu>
      <el-submenu index="/goods">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item index="/goods/list">商品列表</el-menu-item>
        <el-menu-item index="/goods/params">分类参数</el-menu-item>
        <el-menu-item index="/goods/categories">商品分类</el-menu-item>
      </el-submenu>
      <el-submenu index="/order">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>订单管理</span>
        </template>
        <el-menu-item index="/order/list">订单列表</el-menu-item>
      </el-submenu>
      <el-submenu index="/reports">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>数据统计</span>
        </template>
        <el-menu-item index="/reports/index">数据报表</el-menu-item>
      </el-submenu>
    </el-menu> -->

<el-menu
  router
    :default-active="this.$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
  >
    <el-submenu v-for="(item,index) in menuList" :key="item.id" :index="'/'+item.path">
      <template slot="title">
        <i :class="['iconfont',iconObj[item.path]]"></i>
        <span>{{item.authName}}</span>
      </template>
      <el-menu-item v-if="item.children.length==1" v-for="(menu,index) in item.children" :key="menu.id" :index="'/'+item.path">{{menu.authName}}</el-menu-item>
        <el-menu-item v-if="item.children.length>1" v-for="(menu,index) in item.children" :key="menu.id" :index="'/'+item.path+'/'+menu.path">{{menu.authName}}</el-menu-item>
    </el-submenu>
  </el-menu>
  </div>
</template>

<script>
export default {
   computed:{
    computedRoute(){
      console.log(this.$route.path)
      return this.$route.path;
    }
  },
  data() {
    return {
      menuList:[],
       iconObj:{
        users:"icon-users",
        rights:"icon-lock_fill",
        goods:"icon-shangpin",
        orders:"icon-danju",
        reports:"icon-baobiao"
      }
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    async query() {
      let rst = await this.$http.get("menus");
      let {meta,data}=rst
      this.menuList=data;
      console.log(data);
    },
  },
};
</script>

<style lang="less" scoped>
</style>